<template>
  <div class="manage scroll clearfix">
    <div class="filter fr">
      <el-dropdown trigger="click" @command="selectWord">
        <el-button type="primary" size="mini">
          <template v-if="sort == ''"> 点我筛选 </template>
          <template v-else>{{ sort }}</template>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="前端">前端</el-dropdown-item>
            <el-dropdown-item command="后台">后台</el-dropdown-item>
            <el-dropdown-item command="已报名">已报名</el-dropdown-item>
            <el-dropdown-item command="已面试">已面试</el-dropdown-item>
            <el-dropdown-item command="面试通过">面试通过</el-dropdown-item>
            <el-dropdown-item command="考核通过">考核通过</el-dropdown-item>
            <el-dropdown-item command="05-28">05-28</el-dropdown-item>
            <el-dropdown-item command="05-29">05-29</el-dropdown-item>
            <el-dropdown-item command="05-30">05-30</el-dropdown-item>
            <el-dropdown-item command="05-31">05-31</el-dropdown-item>
            <el-dropdown-item command="06-01">06-01</el-dropdown-item>
            <el-dropdown-item command="06-02">06-02</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <el-table
      :data="data"
      style="width: 100%"
      :cell-class-name="ccn"
      @row-dblclick="show"
    >
      <el-table-column label="姓名" prop="name"> </el-table-column>
      <el-table-column label="手机号" prop="phoneNum"> </el-table-column>
      <el-table-column label="学院和专业" prop="collegeAndMajor">
      </el-table-column>
      <el-table-column label="性别" prop="sex"> </el-table-column>
      <el-table-column label="方向" prop="direction"> </el-table-column>
      <el-table-column label="状态" prop="status"> </el-table-column>
      <el-table-column label="预约时间" prop="duration"> </el-table-column>
      <el-table-column label="自我介绍">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" >
            <template #default>
              <p>{{ scope.row.intro}}</p>
            </template>
            <template #reference>
              <div class="name-wrapper">
                <el-tag size="medium">{{scope.row.name}}</el-tag>
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template #default="scope">
          <el-button size="mini" @click="pass(scope.row)" type="success"
            >通过</el-button
          >
          <el-button size="mini" type="danger" @click="refuse(scope.row)"
            >不通过</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import manageSetup from "@/setups/manage";
export default defineComponent({
  setup() {
    return manageSetup();
  },
  created() {
    this.getUsers();
  },
});
</script>

<style scoped lang='scss'>
.manage {
  margin: 0 auto;
  .filter {
    padding-right: 1.4rem;
  }
}
</style>